<template>
  <div class="main-contain">
    <div class="title-contain">
      <div class="logo">
        <el-image :src="logoUrl" fit="contain" v-on:click="go2Index"></el-image>
      </div>
      <div class="title">
        <p>后台登录</p>
      </div>
    </div>
    <div class="login-contain">

      <div class="login">
        <el-form class="loginForm" :model="loginForm" label-width="80px" size="small" >
          <el-form-item label="账户">
            <el-input v-model="loginForm.username"/>
          </el-form-item>
          <el-form-item label="密码">
            <el-input type="password" v-model="loginForm.password"/>
          </el-form-item>
          <el-form-item label="验证码" v-if="flag>2">
            <el-input v-model="loginForm.code" maxlength="4"/>
          </el-form-item>
          <div class="btn-contain">
            <el-button type="primary" class="btn" @click="login" size="mini">登录</el-button>
          </div>
          <!-- <div class="regist-contain">
            <el-link href="/regist" :underline="false">点此注册</el-link>
          </div> -->
        </el-form>
      </div>
    </div>
  </div>
</template>

<style scoped>

.login-contain{
  width: 400px;
  height: 300px;
  margin: 80px auto 0;
  position: relative;
  border: 1px solid #343a40;
  border-radius: 30px;
  background: inherit;
  box-shadow: 3px 3px 5px 3px rgba(0, 0, 0, 0.3);
  overflow: hidden;
  z-index: 1;
}

.login-contain:before{
  content: '';
  position: absolute;
  top: 0; bottom: 0;
  left: 0; right: 0;
  filter: blur(5px);
  background:url('../../assets/background.jpg') 0 / cover fixed;
  z-index: -1;
  margin: -30px;
}

.main-contain{
  position: absolute;
  background:url('../../assets/background.jpg') 0 / cover fixed;
  width: 100%;
  height: 100%;
}
body,.main-contain::before{
  width: 100%;
  height: 100%;
  background:url('../../assets/background.jpg') 0 / cover fixed
}

p{
  color: #ffffff;
  font-family: "Comic Sans MS", cursive, sans-serif;
  font-weight: bolder;
  letter-spacing: 0.1em;
  font-size: 40px;
}
.login {
  margin-top: 20px;
}

::v-deep(.el-form-item__label){
  text-align: center;
  line-height: 35px;
  font-size: 18px;
  letter-spacing: 0.15em;
  color: #ffffff;
}

::v-deep(.el-form-item__content){
  margin-right: 40px;
}

.loginForm{
  position: relative;
  top: 30px;
}


.el-form-item__label{
  font-size: 20px;
  color: #03e9f4;
}


#go2Regist{
  text-decoration: none;
  font-size: 20px;
  color: #03e9f4;
  transition: 0.2s ease-in;
}

#go2Regist:hover {
  color: white;
}
.btn{
  font-size: 16px;
  letter-spacing: 0.15em;
  transition: 0.25s all;
}
.btn:hover{
  color: #f4f4f5;
  box-shadow: 2px 2px 5px #000;
}

.regist-contain a{
  text-decoration: none;
  font-size: 20px;
  letter-spacing: 0.15em;
  transition: 0.25s all ease-in-out;
  color: #f4f4f5;
}

.title-contain{
  position: relative;
  top: 70px;
  width: 300px;
  margin: 0 auto;
}
.logo{
  position: relative;
  cursor: pointer;
  top: 20px;
}
.btn-contain{
  width: fit-content;
  margin: 25px auto 0;
}

.regist-contain{
  width: fit-content;
  margin: 20px auto 20px;
}


</style>

<script>
import axios from 'axios'
import {medicalStaffLogin} from '../../api/api'

export default {
  name: "Index",
  data(){
    return{
      loginForm:{
        username: '',
        password: '',
        code: '',
      },
      flag: 0,
      logoUrl: 'https://gitee.com/Kolvzaki/pics/raw/master/img/logo.png'
    }
  },
  beforeRouteEnter(to, from, next) {

    // 添加背景色 margin:0;padding:0是为了解决vue四周有白边的问题
    document.querySelector('body').setAttribute('style', 'margin:0;padding:0;')
    next()
  },
  beforeRouteLeave(to, from, next) {
    // 去除背景色
    document.querySelector('body').setAttribute('style', '')
    next()

  },
  methods:{
    login: function (){
      let data = {
        username:this.loginForm.username,
        password:this.loginForm.password
      }
      medicalStaffLogin(data).then(response => {
        console.log('请求成功',response)
        if (response.ret == '0') {
          this.$store.dispatch("medicalStaff/login",response)
          localStorage.setItem('loginData',JSON.stringify(response))
          // sessionStorage.setItem('username',JSON.stringify(response.username))
          this.$router.push('/homeview/staffInfo')
        } else {
          //密码错误
          this.$message({
            message:'账号或密码错误',
            type: 'error',
            showClose:true
          })
        }

      })
    },
    go2Index: function (){
      this.$router.push('/index/home')

    }
  },
}

</script>
